<template>
    <div class="heading" :style="{ backgroundImage: `url('${backgroundimage}')` }">
        <div class="title">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <section class="container" id="posts">
        <div class="post-container">
            <articledetail></articledetail>
            <div class="comment">
                <div class="title">
                    <h3>评论({{ total }})</h3>
                    <Comment @sendContent="getContent"></Comment>
                    <commentList @deleteComment="deleteComment" :commentListValue="commentListValue"></commentList>
                </div>
            </div>
            <div class="page">
                <el-pagination v-model:current-page="ListDto.pageNum" size="small" background v-if="total != 0"
                    layout="prev, pager, next" v-model:page-size="ListDto.pageSize"
                    @current-change="handleCurrentChange" :total="total" class="mt-4" />
            </div>
        </div>
        <div class="sidebar">
            <About></About>
            <digital></digital>
            <recommendarticle :recommendValue="recommendValue">
            </recommendarticle>
        </div>
    </section>
</template>

<script setup>
import { reactive, ref, watch, provide } from 'vue';
import { useRoute } from 'vue-router';
import { getArticleDetailAPI, recommendArticlesAPI, sendCommentAPI, commentListAPI, deleteCommentAPI } from '@/api'
import { useArticleStore } from '@/store/Article/index.js'
import { About, recommendarticle, articledetail } from '@/components/Article/index.js'
import Comment from '@/components/Comment/comment.vue';
import digital from '@/components/digital/index.vue'
import commentList from '@/components/Comment/commentList.vue';

const route = useRoute()
const title = ref()
const articleId = ref()
const backgroundimage = ref();
let recommendValue = ref()

let ListDto = reactive({
    pageNum: 1,
    pageSize: 6,
    articleId: ''
})
let total = ref(0)
let commentListValue = ref()
const initarticledetail = async () => {
    const res = await getArticleDetailAPI(articleId.value)
    title.value = res.title
    backgroundimage.value = res.thumbnail
    useArticleStore().setArticleValue(res)
}
const initrecommendarticle = async () => {
    const res = await recommendArticlesAPI()
    recommendValue.value = res
}

const originalData = () => ({
    articleId: '',
    rootId: -1,
    toCommentId: -1,
    toCommentUserId: -1,
    content: ''
})

const deleteComment = async (val) => {
    const res = await deleteCommentAPI(val)
    if (res != false) {
        ElMessage.success("删除成功")
    }
    initCommentList()
}

let commentValue = reactive(originalData())

const getContent = async () => {
    commentValue.articleId = articleId.value
    const res = await sendCommentAPI(commentValue)
    if (res != false) {
        ElMessage.success("评论成功")
        Object.assign(commentValue, originalData())
        initCommentList()
    }
}
provide('commentValue', commentValue)
provide('getContent', getContent)

const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initCommentList()
}
const initCommentList = async () => {
    ListDto.articleId = articleId.value
    const res = await commentListAPI(ListDto)
    total.value = Number(res.total)
    commentListValue.value = res.rows
}
initrecommendarticle()
watch(
    () => route.query.articleId,
    () => {
        articleId.value = route.query.articleId
        initCommentList()
        initarticledetail()
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.heading {
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}

.post-container {
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    border: #eee solid .1rem;
    padding: 2rem;
}

.heading .title {
    font-size: 1.8rem;
    text-align: center;
    align-items: center;
    width: 90%;
    color: #fff200;
    word-break: break-all;
}

.comment .title h3 {
    font-size: 2rem;
    font-weight: 500;
    color: orange;
}


.page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 2rem 0;
}

section {
    padding: 3rem 9%;
}

.container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 2.5rem;
    background-color: #fff;
}

@media (max-width:1200px) {
    section {
        padding: 2rem;
    }
}

@media (max-width:991px) {
    .container {
        grid-template-columns: 2fr 1fr;
    }
}

@media (max-width:768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
</style>